<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="../css/animate.min.css" rel="stylesheet">
    <link href="../css/plugins/summernote/summernote.css" rel="stylesheet">
    <link href="../css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
    <link href="../css/style.min862f.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>手机号变更列表:</h5><br><br>
                    <a href="#" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal">
                        <span class="glyphicon glyphicon-plus"></span>
                        手机号码变更申请
                    </a>

                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th></th>
                            <th>人员姓名</th>
                            <th>身份证号</th>
                            <th>证书编号</th>
                            <th>原手机号</th>
                            <th>新手机号</th>
                            <th>审核状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>410823200009207777</td>
                            <td>xzQe372</td>
                            <td>13765489224</td>
                            <td>17624689334</td>
                            <td>审核通过</td>
                            <td>
                                查看
                            </td>

                        </tr>
                        <tr>
                            <td>2</td>
                            <td>李四</td>
                            <td>410823200009207777</td>
                            <td>xzQe372</td>
                            <td>17624689334</td>
                            <td>13765489224</td>
                            <td>审核不通过</td>
                            <td>
                                查看
                            </td>

                        </tr>
                        <tr>
                            <td>3</td>
                            <td>王五</td>
                            <td>410823200777700920</td>
                            <td>xzQe372</td>
                            <td>17624689334</td>
                            <td>13765489224</td>
                            <td>审核不通过</td>
                            <td>
                                查看
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    信息查看
                                </h4>
                            </div>
                            <div class="modal-body">
                                <form class="form-inline">
                                    <div class="row">
                                        <div class="col-md-8" id="left1">
                                            <label for="oldPhone">原手机号:</label>
                                            <input type="text" placeholder="原手机号" class="form-control c1"
                                                   id="oldPhone"><br>

                                            <label for="newPhone">新手机号:</label>
                                            <input type="text" class="form-control c1" placeholder="新手机号"
                                                   id="newPhone"><br>

                                            <label for="idNumber">身份证号:</label>
                                            <input type="text" class="form-control c1" placeholder="身份证号"
                                                   id="idNumber"><br>

                                            <label for="certificateNumber">证书编号:</label>
                                            <input type="text" class="form-control c1" placeholder="证书编号"
                                                   id="certificateNumber">
                                        </div>

                                        <div class="col-md-4" id="div4">
                                            <input type="file" id="btn_file" style="display:none">
                                            <button id="but1" class="btn btn-default" onclick="file1()" type="button"
                                                    style="border-radius:15px">
                                                <span class="glyphicon glyphicon-plus" id="jias"></span>
                                            </button>

                                        </div>

                                    </div>
                                    <h3 style="color: red;margin-top: 30px">拍照上传提示：点击右侧 "+"
                                        上传手持证书原件清晰照一张，能看清人和证书信息，禁止P图</h3>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                </button>
                                <button type="button" class="btn btn-primary">
                                    提交更改
                                </button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../js/jquery.min.js?v=2.1.4"></script>
<script src="../js/bootstrap.min.js?v=3.3.6"></script>
<script src="../js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="../js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="../js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="../js/content.min.js?v=1.0.0"></script>
<script>
    $(document).ready(function () {
        $(".dataTables-example").dataTable();
        var oTable = $("#editable").dataTable();
        oTable.$("td").editable("http://www.zi-han.net/theme/example_ajax.php", {
            "callback": function (sValue, y) {
                var aPos = oTable.fnGetPosition(this);
                oTable.fnUpdate(sValue, aPos[0], aPos[1])
            }, "submitdata": function (value, settings) {
                return {"row_id": this.parentNode.getAttribute("id"), "column": oTable.fnGetPosition(this)[2]}
            }, "width": "90%", "height": "100%"
        })
    });

    function fnClickAddRow() {
        $("#editable").dataTable().fnAddData(["Custom row", "New row", "New row", "New row", "New row"])
    };

    function file1() {
        document.getElementById("btn_file").click();
    }
</script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>

</body>

<style>

    .form-control {
        margin-top: -5px;
    }


    .c1 {
        margin-top: 10px;
    }

    #but1 {
        height: 100px;
        width: 100px;
        /*border: blue solid 1px;*/
    }

    #jias {
        font-size: 100%;
        font-size: 60px;
        color: white;
    }

    #div4 {
        margin-top: -122px;
        margin-left: 55%;
        /*border: red solid 1px;*/
    }
</style>
</html>